<style lang="less">
.hmProject {
    .ivu-modal {
        width: 660px !important;
    }

    .pic {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;

        .pic-box {
            display: flex;
            justify-content: center;
            padding: 2px;
            box-sizing: border-box;
            align-items: center;
            width: 100px;
            height: 80px;
            line-height: 80px;
            margin-right: 10px;
            border: 1px dashed #2988f3;
            cursor: pointer;

            &:hover {
                transform: scale(1.02);
            }
        }

        .re-upload {
            width: 100%;
            flex: 1;
            color: #2e58d6;
            font-size: 13px;

            span {
                cursor: pointer;
            }
        }

        .pic-text {
            font-size: 13px;
            color: #cbcfd6;
        }
    }
}
</style>
<template>
    <Modal v-model="show" :title="editTitle" class="hmProject" :mask-closable="false">
        <Form ref="hmProjectForm" :model="hmProjectForm" :rules="hmProjectFormRule" :label-width="100">
            <FormItem label="项目名称" prop="title">
                <Input v-bind:disabled="disabled" type="text" :maxlength=50 v-model="hmProjectForm.title" placeholder="请输入项目名称"/>
            </FormItem>
            <Row>
                <Col span="12">
                    <FormItem label="原始价格" prop="initPrice">
                        <Input v-bind:disabled="disabled" type="number" :maxlength=50 v-model="hmProjectForm.initPrice" placeholder="请输入原始价格">
                            <template #append>
                                <span>元</span>
                            </template>
                        </Input>
                    </FormItem>
                </Col>
                <Col span="12">
                    <FormItem label="销售价格" prop="price">
                        <Input v-bind:disabled="disabled" type="number" v-model="hmProjectForm.price" placeholder="请输入销售价格">
                            <template #append>
                                <span>元</span>
                            </template>
                        </Input>
                    </FormItem>
                </Col>
            </Row>
            <FormItem label="时长" prop="timeLong">
                <Input v-bind:disabled="disabled" type="number" v-model="hmProjectForm.timeLong" placeholder="请输入时长">
                    <template #append>
                        <span>分钟</span>
                    </template>
                </Input>
            </FormItem>
            <FormItem label="首页图片" prop="cover">
                <div class="pic">
                    <div class="pic-box" :style="{'border':hmProjectForm.cover?'0 !important;':'auto'}" @click="upload">
                        <input ref="upload" type="file" accept="image/*" id="people-export" @change="inputChange" style="display: none;"/>
                        <Icon type="ios-add" size="24" color="#2988f3" v-if="!hmProjectForm.cover"/>
                        <img :src="tempUrl" style="height: 100%;width: 100%;" v-else>
                    </div>
                    <div class="re-upload" v-if="hmProjectForm.cover && !disabled">
                        <span @click="upload">重新上传</span>
                    </div>
                    <span class="pic-text" v-if="!disabled"
                          :style="{'width':hmProjectForm.cover ?'100%':'auto'}">格式：png，尺寸：180*180px，不包含透明度</span>
                </div>
            </FormItem>

            <Tabs type="card">
                <TabPane label="项目介绍">
                    <myWangEditor :editorContent="hmProjectForm.introduce" id="myWangEditor1" ref="myWangEditor1"></myWangEditor>
                </TabPane>
                <TabPane label="注意事项">
                    <myWangEditor :editorContent="hmProjectForm.explainInfo" id="myWangEditor2" ref="myWangEditor2"></myWangEditor>
                </TabPane>
                <TabPane label="下单须知">
                    <myWangEditor :editorContent="hmProjectForm.notice" id="myWangEditor3" ref="myWangEditor3"></myWangEditor>
                </TabPane>
            </Tabs>
            <FormItem label="项目简介" prop="subTitle">
                <Input v-bind:disabled="disabled" :rows="3" :autosize="{maxRows: 5,minRows: 3}" type="textarea" v-model="hmProjectForm.subTitle" placeholder="请输入项目简介"/>
            </FormItem>
            <FormItem label="排名" prop="top">
                <InputNumber v-bind:disabled="disabled" type="text" :min="0" :max="99" v-model="hmProjectForm.top" placeholder="请输入排名"/>
            </FormItem>

        </Form>
        <div slot="footer">
            <Button type="text" @click="show=false">取消</Button>
            <Button type="primary" :loading="loading" @click="handSubmit" v-if="!disabled">提交</Button>
        </div>
    </Modal>
</template>
<script>
import {addHmProject, updateHmProject, getHmProject} from '@/api/hmzd/hmProject'
import util from "@/libs/util";
import myWangEditor from "../../my-components/scmt/myWangEditor";

export default {
    name: "updateHmProject",
    components: {myWangEditor},
    props: {
        value: {
            type: Boolean,
            default: false
        },
        HmProjectId: {
            type: String
        },
        modalTitle: {
            type: String
        }
    },
    data() {
        const validaPrice = (rule,value,callback) => {
            if(value) {
                callback()
            }
            callback(new Error("请输入金额"))
        };
        return {
            show: this.value,
            editTitle: this.modalTitle,
            loading: true,
            disabled: false,
            delFlagRadio: [],
            hmProjectForm: {},
            hmProjectFormRule: {
                title: [
                    {required: true, message: '名称不能为空！', trigger: 'blur'},
                    {type: 'string', max: 50, message: '数据的最大长度为50！', trigger: 'blur'}
                ],
                cover: [
                    {required: true, message: '图片地址不能为空！', trigger: 'change' },
                ],
                price: [
                    {required: true, message: '价格不能为空！', trigger: 'change' ,validator: validaPrice,  pattern: /.+/},
                ],
                timeLong: [
                    {required: true, message: '时长不能为空！', trigger: 'change' , pattern: /.+/},
                ],
                // introduce: [
                //     {required: true, message: '项目介绍不能为空！', trigger: 'blur', pattern: /.+/},
                // ],
                // explainInfo: [
                //     {required: true, message: '注意事项不能为空！', trigger: 'blur', pattern: /.+/},
                // ],
                // notice: [
                //     {required: true, message: '下单须知不能为空！', trigger: 'blur', pattern: /.+/},
                // ],
                // top: [
                //     {required: true, message: '排名不能为空！', trigger: 'blur'},
                //     {type: 'string', max: 50, message: '数据的最大长度为50！', trigger: 'blur'}
                // ],
                initPrice: [
                    {required: true, message: '原始价格不能为空！', trigger: 'change', pattern: /.+/},
                ],
                // subTitle: [
                //     {required: true, message: '项目简介不能为空！', trigger: 'blur', pattern: /.+/},
                // ],
            },
            tempUrl: "",
        }
    },
    methods: {
        handSubmit() {
            this.$refs['hmProjectForm'].validate((valid) => {
                this.loading = true;
                if (valid) {
                    this.hmProjectForm.introduce = this.$refs.myWangEditor1.getEditorData();
                    this.hmProjectForm.explainInfo = this.$refs.myWangEditor2.getEditorData();
                    this.hmProjectForm.notice = this.$refs.myWangEditor3.getEditorData();

                    if (this.HmProjectId != null && this.HmProjectId.trim().length > 0) {
                        this.hmProjectForm.id = this.HmProjectId;
                        updateHmProject(this.hmProjectForm).then(res => {
                            if (res.success) {
                                this.closeModal(false);
                                this.$emit('handSearch');
                                this.$Message.success('保存成功');
                            } else {
                                this.$Message.error(res.msg);
                            }
                        }).finally(() => {
                            this.loading = false;
                        });
                    } else {
                        addHmProject(this.hmProjectForm).then(res => {
                            if (res.success) {
                                this.closeModal(false);
                                this.$emit('handSearch');
                                this.$Message.success('保存成功');
                            } else {
                                this.$Message.error(res.msg);
                            }
                        }).finally(() => {
                            this.loading = false;
                        });
                    }
                } else {
                    this.loading = false;
                    this.$Message.error('表单验证不通过！');
                }
            });
        },
        closeModal(val) {
            this.$emit('input', val);
        },
        initForm() {
            this.hmProjectForm = {
                title: '',
                cover: '',
                price: undefined,
                timeLong: undefined,
                introduce: '',
                explainInfo: '',
                notice: '',
                initPrice: undefined,
                subTitle: '',
                top: undefined,
            };
        },
        //图片上传
        inputChange(e) {
            const inputFile = this.$refs['upload'].files[0];
            let fileSize = inputFile.size;
            var size = fileSize / 2048;
            if (size > 2048) {
                this.$Message.error('图片大小不能超过2M！');
                return;
            }
            if (size <= 0) {
                this.$Message.error('图片大小不能为0M！');
                return;
            }

            let fileType = inputFile.type.toString().substring(inputFile.type.toString().lastIndexOf('/') + 1, inputFile.type.toString().length);
            if (fileType) {
                if (fileType.toLowerCase() != 'jpg' && fileType.toLowerCase() != 'jpeg' && fileType.toLowerCase() != 'png') {
                    this.$Message.error('附件格式不正确，请选择图片格式！');
                    this.$refs.filElem.value = null;
                    return;
                }
            }
            let reader = new FileReader();
            reader.readAsDataURL(inputFile);
            reader.onload = () => {
                this.hmProjectForm.cover = reader.result;
                this.tempUrl = reader.result;
            }
        },
        //点击上传图片
        upload() {
            if (this.disabled) {
                return;
            }
            this.$refs['upload'].dispatchEvent(new MouseEvent('click'));
        },
        //图片上传成功
        handleSuccess(res) {
            this.tempUrl = util.nginxUrl + res.data;
            this.hmProjectForm.cover = res.data;
        },
    },
    watch: {
        value(val) {
            this.show = val;
        },
        show(val) {
            this.initForm();
            this.loading = false;
            this.editTitle = this.modalTitle;
            if (this.editTitle == "查看") {
                this.disabled = true;
            } else {
                this.disabled = false;
            }
            if (val) {
                this.$refs['hmProjectForm'].resetFields();
                this.$refs['hmProjectForm'].id = null;
                if (this.HmProjectId != null && this.HmProjectId.trim().length > 0) {
                    getHmProject({id: this.HmProjectId}).then(res => {
                        if (res.success) {
                            if (res.data.cover) {
                                this.tempUrl = util.nginxUrl + res.data.cover;
                            }
                            this.hmProjectForm = res.data;
                        } else {
                            this.$Message.error(res.msg);
                        }
                    });
                }
            } else {
                this.closeModal(val);
            }
        }
    }
}
</script>

